<template>
  <div class="person">
    <h2>姓名：{{ obj.name }}</h2>
    <h2>年龄：{{ obj.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">年龄+1</button>
    <button @click="showTel">点我查看联系方式</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
defineOptions({
  name: 'Person',
})
const name = ref('zll')
const age = ref(20)
const obj = ref({
  name: '1',
  age:20
})
console.log(obj.value) // 如果使用ref定义对象类型是数据默认obj.value也是响应式的，它底层是proxy
const changeName = () => {
  obj.value.name = 'zll2'
}
const changeAge = () => {
  obj.value.age += 1
}
const showTel = () => {
  alert('18888888888')
}
</script>

<style scoped lang="less">
.person {
  width: 300px;
  height: 300px;
  border: 1px solid #000;
}
</style>
